<template>
  <el-select
    clearable
    value-key="id"
    :disabled="disabled"
    :model-value="modelValue"
    :placeholder="placeholder"
    :style="{ width }"
    @change="change"
  >
    <el-option
      v-for="item in OpsList"
      :key="item.id"
      :label="item.name"
      :value="isObjectValue ? item : item.id"
    />
  </el-select>
</template>

<script>
  import { getCampusList } from '@/api/system/dept.js';
  /** 业务组件-院区下拉选择器 */
  export default {
    name: 'CampusSelector',
    components: {},
    inheritAttrs: false,
    props: {
      modelValue: {
        type: [String, Object, Number],
        default() {
          return '';
        },
      },
      placeholder: {
        type: String,
        default: '请选择院区',
      },
      width: {
        type: String,
        default: '',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      isObjectValue: {
        // select框绑定的值是对象 还是值
        type: Boolean,
        default: false,
      },
      useAll: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['update:modelValue', 'capusChange'],
    data() {
      return {
        OpsList: [],
      };
    },
    created() {
      this.getOpsList();
    },
    methods: {
      getOpsList() {
        getCampusList().then((res) => {
          if (this.useAll) {
            res.data.unshift({ id: '', name: '全院' });
          }
          this.OpsList = res.data;

          this.$emit(
            'update:modelValue',
            this.isObjectValue ? this.OpsList[0] : this.OpsList[0]?.id,
          );
        });
      },
      change(val) {
        this.$emit('capusChange', val);
        this.$emit('update:modelValue', val);
      },
    },
  };
</script>

<style lang="scss" scoped></style>
